import { Col, List, Row, Table } from 'antd'
import { Base, Column, Tiny } from '@ant-design/plots'
import { ProCard } from '@ant-design/pro-components'

//文件数量复合图
const config = {
  type: 'spaceLayer',
  data: {
    type: 'fetch',
    value:
      'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/base-space-layer.json',
  },
  children: [
    //柱状图
    {
      type: 'interval',
      encode: { x: 'letter', y: 'frequency', color: 'letter' },
      transform: [{ type: 'sortX', reverse: true, by: 'y' }],
      scale: { color: { palette: 'cool', offset: (t) => t * 0.8 + 0.1 } },
      legend: false,
    },
    //饼状图
    {
      type: 'interval',
      x: 300,
      y: 20,
      width: 300,
      height: 300,
      encode: { y: 'frequency', color: 'letter' },
      transform: [{ type: 'stackY' }],
      scale: { color: { palette: 'cool', offset: (t) => t * 0.8 + 0.1 } },
      coordinate: { type: 'theta' },
      legend: false,
    },
  ],
}
//文件数量排名
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
  {
    key: '2',
    name: '胡彦祖',
  },
]
const columns = [
  {
    title: '区县',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '数量',
    dataIndex: 'num',
    key: 'num',
  },
]

//迷你图
// const data = [
//   264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
//   546, 983, 340, 539, 243, 226, 192,
// ].map((value, index) => ({ value, index }))
// const configMini = {
//   data: data,
//   width: 480,
//   height: 80,
//   padding: 8,
//   shapeField: 'smooth',
//   xField: 'index',
//   yField: 'value',
//   style: {
//     fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)',
//     fillOpacity: 0.6,
//   },
// }

export default function index() {
  return (
    <>
      <Row gutter={10}>
        <Col span={6}>
          <ProCard title="总张数">
            <div>8000</div>
            {/* <Tiny.area {...configMini} /> */}
          </ProCard>
        </Col>
        <Col span={6}>
          <ProCard title="图片数">
            <div>5000</div>
            {/* <Tiny.area {...configMini} /> */}
          </ProCard>
        </Col>
        <Col span={6}>
          <ProCard title="视频数">
            <div>2000</div>
            {/* <Tiny.area {...configMini} /> */}
          </ProCard>
        </Col>
        <Col span={6}>
          <ProCard title="音频数">
            <div>1000</div>
            {/* <Tiny.area {...configMini} /> */}
          </ProCard>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span={18}>
          <ProCard style={{ height: '80vh' }} title={'文件数量'}>
            <Base {...config} />
          </ProCard>
        </Col>
        <Col span={6}>
          <ProCard style={{ height: '80vh' }} title={'区县照片排行'}>
            <Table
              dataSource={dataSource}
              columns={columns}
              pagination={false}
            />
          </ProCard>
        </Col>
      </Row>
    </>
  )
}
